/**
* @description: 审批页(包含提交业务)
* @author: 赵伟
**/
<template>
  <div class="approval-wrap">
    <div class="approval-inner">
      <div class="approval-result">
        <div class="result-title">
          <span>*</span>
          <span>审批结果：</span>
        </div>
        <div class="result-radio-wrap">
          <van-radio-group v-model="radio" direction="horizontal">
            <van-radio name="2">同意</van-radio>
            <van-radio name="1">拒绝</van-radio>
          </van-radio-group>
        </div>
      </div>

      <div class="approval-determine">
        <div class="determine-title">
          审批意见：
        </div>
        <div class="determine-text">
          <textarea class="remark-text" v-model="determineResult"/>
        </div>
      </div>

      <div class="approval-submit">
        <van-button block native-type="submit" @click="submitApproval">确认</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import {Dialog} from "vant";

export default {
  name: "Approval",
  data() {
    return {
      radio: '',
      determineResult: '',
    }
  },
  methods: {
    submitApproval () {
      // 提交审批

      if (!this.radio) {
        Dialog.alert({
          title: "提示",
          message: "尚未选择审批结果，请重新填写"
        }).then(() => {})
        return;
      }

      this.$emit('submitApproval', {
        radio: this.radio,
        determineResult: this.determineResult,
      })
    }
  },
}

</script>

<style scoped lang="scss">
.approval-wrap {
  width: calc(100vw - #{px2vw(60)});
  padding: px2vh(60) px2vw(30) 0 px2vw(30);

  .approval-inner {
    width: 100%;
    .approval-result {
      width: 100%;
      display: flex;
      margin-bottom: px2vh(40);
      .result-title {
        span:nth-child(1) {
          color: red;
        }
      }
    }

    .approval-determine {
      width: 100%;
      margin-bottom: px2vh(80);
      .determine-title {
        width: 100%;
        margin-bottom: px2vh(40);
      }

      .determine-text {
        width: calc(100% - #{px2vw(111)});
        background-color: #FAFAFA;
        padding: px2vh(41) px2vw(56) px2vh(77) px2vw(55);
        border-radius: px2vw(20);
        .remark-text {
          height: px2vh(160);
        }
      }
    }

    .approval-submit {
      width: 100%;
      margin-bottom: px2vh(40);
      /deep/ .van-button {
        height: px2vh(120);
        color: #fff;
        background-color: #417ADC;
        border: 1px solid #417ADC;
        border-radius: px2vh(60);
        width: calc(100% - #{px2vw(4)});
      }
    }
  }
}
</style>